 import React,{Component,useState,useEffect} from 'react';
import {ListView, Button, Toast, PullToRefresh} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import http from "../../model/http";
export default function Test() {

    const [dataSource,setDataSource] =useState(new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    }))
    const [ datas,setDatas] =useState([])
    const [ pageIndex,setPageIndex] =useState(1)
    const [ refreshing,setRefreshing] =useState(true)
    const [ isLoading,setIsLoading] =useState(true)
    const [ useBodyScroll,setUseBodyScroll] =useState(false)
    const [ dataBlobs,setDataBlobs] =useState({})
    const [ sectionIDs,setSectionIDs] =useState([])
    const [ rowIDs,setRowIDs] =useState([])
    const [ dataArr,setDataArr] =useState([])
    const [ hasMore,setHasMore] =useState(true)
     const genData=(ref=false,page=1)=> {
         //获取数据
         let that=this;
         http.outPost('/customer/searchCustomer',{
             params:'20091',
             page:page,
             items:10,
             hosId:6,
             userId:'ChenXianLin',
             managerId:1407611596788060161
         }).then(function (res){
             if(res.result==0){
                 const lg = res.data.length;
                 if(lg<=0){
                     Toast.success('没有数据了~',1);
                     setIsLoading(false)
                     setHasMore(false)
                     return false;
                 }

                 let temp_dataArr = dataArr;//关键代码
                 let m=datas;
                 for (let i = 0; i < lg; i++) {
                     //每一次读取的数据都进行保存一次
                     temp_dataArr.push(`row - ${((parseInt(pageIndex)-1) * lg) + i}`);
                     m.push(res.data[i])
                 }
                 if(ref){
                     setDatas(res.data)
                     setPageIndex(pageIndex+1)
                     setDataSource(dataSource.cloneWithRows(temp_dataArr))
                     setRefreshing(false)
                     setIsLoading(false)
                     setDataArr(temp_dataArr)
                 }else{
                     //这里表示上拉加载更多
                     let rData = { ...rData, ...dataArr };
                     setDatas(m)
                     setPageIndex(pageIndex+1)
                     setDataSource(dataSource.cloneWithRows(rData))
                     setRefreshing(false)
                     setIsLoading(false)
                     setDataArr(temp_dataArr)
                 }
             }else{
                 Toast.fail('请求失败',1.5);
             }
         });
     }
    useEffect(()=>{
        genData(true,1);
    },[])

     const onEndReached = (event) => {
         if (isLoading && !hasMore ) {
             return;
         }
         setIsLoading(true)
         let that=this;
         setTimeout(() => {
             genData(false,pageIndex);
         }, 1000);
     };
    const separator = (sectionID, rowID) => (
        <div
            key={`${sectionID}-${rowID}`}
            style={{
                backgroundColor: '#F5F5F9',
                height: 8,
                borderTop: '1px solid #ECECED',
                borderBottom: '1px solid #ECECED',
            }}
        />
    );
    let index = datas.length - 1;
    const row = (rowData, sectionID, rowID) => {
        if (index < 0) {
            index = datas.length - 1;
        }
        const obj = datas[index--];
        return (
            <div key={rowID}
                 style={{
                     padding: '0 15px',
                     backgroundColor: 'white',
                     height:'4rem'
                 }}
            >
                <div style={{ height: '50px', lineHeight: '50px', color: '#888', fontSize: '18px', borderBottom: '1px solid #ddd' }}>
                    {obj.title}
                </div>
                <div style={{ display: 'flex', padding: '15px' }}>
                    <div style={{ display: 'inline-block' }}>
                        <div style={{ fontSize: '16px' }}>
                            {obj.customerName}
                            <span style={{ fontSize: '30px', color: '#FF6E27' }}>{parseInt(rowID) +1}</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    };
     //这下面的代码跟官网没啥区别，唯一不同的是把外部定义的数据都保存进了
    return (
        <div>
            <ListView
                key={useBodyScroll ? '0' : '1'}
                dataSource={dataSource}
                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {isLoading ? 'Loading...' : '加载完毕，没有更多数据了~'}
                </div>)}
                renderRow={row}
                renderSeparator={separator}
                useBodyScroll
                style={useBodyScroll ? {} : {
                    border: '1px solid #ddd',
                    margin: '5px 0',
                }}
                onEndReachedThreshold={1000}
                onEndReached={onEndReached}
                pageSize={5}
            />
        </div>
    );
 }
//  export default class Test extends React.Component {
//      constructor(props) {
//          super(props);
//          const dataSource = new ListView.DataSource({
//              rowHasChanged: (row1, row2) => row1 !== row2,
//          });
//          this.state = {
//              dataSource,
//              datas:[],
//              pageIndex:1,
//              refreshing: true,
//              isLoading: true,
//              hasMore:true,
//              useBodyScroll: false,
//              dataBlobs: {},
//              sectionIDs:[],
//              rowIDs:[],
//              dataArr:[],//关键代码
//          };
//      }
//      genData(ref=false,page=1) {
//          //获取数据
//          let that=this;
//          http.outPost('/customer/searchCustomer',{
//              params:'20091',
//              page:page,
//              items:10,
//              hosId:6,
//              userId:'ChenXianLin',
//              managerId:1407611596788060161
//          }).then(function (res){
//              if(res.result==0){
//                  const lg = res.data.length;
//                  if(lg<=0){
//                      Toast.success('没有更多数据了~',1);
//                      that.state.isLoading=false
//                      that.state.hasMore=false
//                      return false;
//                  }
//                  let dataArr = that.state.dataArr;//关键代码
//                  let m=that.state.datas;
//                  for (let i = 0; i < lg; i++) {
//                      //每一次读取的数据都进行保存一次
//                      dataArr.push(`row - ${((parseInt(that.state.pageIndex)-1) * lg) + i}`);
//                      m.push(res.data[i])
//                  }
//                  if(ref){
//                      //这里表示刷新使用
//                      that.setState({
//                          datas:res.data,
//                          pageIndex:that.state.pageIndex+1,
//                          dataSource: that.state.dataSource.cloneWithRows(dataArr),
//                          refreshing: false,
//                          isLoading: false,
//                          //保存数据进state
//                          dataArr:dataArr
//                      });
//                  }else{
//                      //这里表示上拉加载更多
//                      let rData = { ...that.rData, ...dataArr };
//                      that.setState({
//                          datas:m,
//                          pageIndex:that.state.pageIndex+1,
//                          dataSource: that.state.dataSource.cloneWithRows(rData),
//                          refreshing: false,
//                          isLoading: false,
//                          //保存数据进state
//                          dataArr:dataArr
//                      });
//                  }
//              }else{
//                  Toast.fail('请求失败',1.5);
//              }
//
//
//
//          });
//      }
//
//      componentDidMount() {
//          this.genData(true,1);
//      }
//      onRefresh = () => {
//          let that=this;
//          this.setState({ refreshing: true, isLoading: true,pageIndex:1 });
//          setTimeout(() => {
//              that.genData(true,0);
//          }, 2000);
//      };
//      onEndReached = (event) => {
//          if (this.state.isLoading && !this.state.hasMore) {
//              return;
//          }
//          this.setState({ isLoading: true });
//          let that=this;
//          setTimeout(() => {
//              that.genData(false,this.state.pageIndex);
//          }, 1000);
//      };
//      //这下面的代码跟官网没啥区别，唯一不同的是把外部定义的数据都保存进了state
//      render() {
//          const separator = (sectionID, rowID) => (
//              <div
//                  key={`${sectionID}-${rowID}`}
//                  style={{
//                      backgroundColor: '#F5F5F9',
//                      height: 8,
//                      borderTop: '1px solid #ECECED',
//                      borderBottom: '1px solid #ECECED',
//                  }}
//              />
//          );
//          let index = this.state.datas.length - 1;
//          const row = (rowData, sectionID, rowID) => {
//              if (index < 0) {
//                  index = this.state.datas.length - 1;
//              }
//              const obj = this.state.datas[index--];
//              return (
//                  <div key={rowID}
//                       style={{
//                           padding: '0 15px',
//                           backgroundColor: 'white',
//                           height:'4rem'
//                       }}
//                  >
//                      <div style={{ height: '50px', lineHeight: '50px', color: '#888', fontSize: '18px', borderBottom: '1px solid #ddd' }}>
//                          {obj.title}
//                      </div>
//                      <div style={{ display: 'flex', padding: '15px' }}>
//                          <div style={{ display: 'inline-block' }}>
//                              <div style={{ fontSize: '16px' }}>
//                                  {obj.customerName}
//                                  <span style={{ fontSize: '30px', color: '#FF6E27' }}>{parseInt(rowID) +1}</span>
//                              </div>
//                          </div>
//                      </div>
//                  </div>
//              );
//          };
//          return (<div>
//              <ListView
//                  key={this.state.useBodyScroll ? '0' : '1'}
//                  // ref={el => this.lv = el}
//                  dataSource={this.state.dataSource}
//                  renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
//                      {this.state.isLoading ? 'Loading...' :(!this.state.hasMore ?'loaded':'加载完毕，没有更多数据了~') }
//                  </div>)}
//                  renderRow={row}
//                  renderSeparator={separator}
//                  useBodyScroll
//                  style={this.state.useBodyScroll ? {} : {
//                      border: '1px solid #ddd',
//                      margin: '5px 0',
//                  }}
//                  pullToRefresh={<PullToRefresh
//                      refreshing={this.state.refreshing}
//                      onRefresh={this.onRefresh}
//                  />}
//                  onEndReachedThreshold={1000}
//                  onEndReached={this.onEndReached}
//                  pageSize={10}
//              />
//          </div>);
//      }
//  }



 // function UserList({list,type,outUserId,isBindOutUesr,searchValue,isSearch}) {
 //
 //   return (
 //      <div className='v-user-search'>
 //         {
 //             list.length>0&& (<div style={{marginTop:'0.5rem'}}>
 //                 <Txt className='g-p10 g-f24 g-mb10 g-flex g-y-center '>
 //                 提醒：共找到<span className='search-count'>{list?.length}</span>位顾客，请确定顾客信息后在绑定此微信号
 //                 </Txt>
 //                 <List id='list'>
 //                     {list.map((item,idx)=>(
 //                         <Item className='g-p10 h-item g-mt10 '
 //                               key={idx}
 //                               extra={
 //                                   <div class='g-flex-col g-f24' >
 //                                   <Btn  type={type} item={item} outUserId={outUserId} isBindOutUesr={isBindOutUesr}/>
 //                                   {
 //                                   item.isBind ===0?( <Button className='g-mt20 bt-isbind '  onClick={() =>
 //                                       Modal.alert( '绑定客户信息', '确认绑定吗？', [
 //                                           { text: '取消'},
 //                                           { text: '确认', onPress:async ()=>{
 //                                               const str_user = window.localStorage.getItem('user')
 //                                               const work_user = JSON.parse(str_user)
 //                                               // console.log(work_user)
 //                                               console.log("aaa",item.customerCrmId)
 //                                                   console.log("bbb",outUserId)
 //                                               let ok  = await http.outPost('/customer/updateCustomerDetailBind',{
 //                                                   crmId: work_user.managerId,
 //                                                   hosId: work_user.hosId,
 //                                                   userId: work_user.userid,
 //                                                   customerCrmId:item.customerCrmId,
 //                                                   outUserId:outUserId
 //                                               })
 //                                               ok.code !== -1 && Toast.success( '成功')
 //                                           } },
 //                                       ])
 //                                   } type="primary" size="small" inline >绑定</Button>):
 //                                       ( <Button className='g-mt20 bt-isbind ' style={{background:'#000000 !important'}} disabled={true} type="primary" size="small" inline >已绑定</Button>)
 //                                   }
 //                               </div>
 //                               }
 //                               thumb={<img src={item.sex=='1'?woman:man} style={{width:'1rem',height:'1rem'}} className='g-round' alt="UserImg"/>}>
 //                             {item.customerName}
 //                             <Brief>
 //                                 <p className='g-f26 g-mt5'>顾客id：<span className='g-f24'>{item.customerCrmId}</span></p>
 //                                 <p className='g-f26 g-mt5'>门诊号：<span>{item.mzcode}</span></p>
 //                                 <p className='g-f26 g-mt5'>所属客管-现场：{item.xcname}</p>
 //                                 <p className='g-f26 g-mt5'>所属客管-电网：{item.dwname}</p>
 //                             </Brief>
 //                         </Item>
 //                     ))}
 //                 </List>
 //
 //             </div>)
 //         }
 //
 //     </div>
 //   )
 // }